<template>
  <div class="artist" v-if="artistalbum">
    <div class="back" @click="backward">《 返回</div>
    <div class="artistImg">
      <img
        :src="artistalbum.picUrl + '?imageView=1&type=webp&thumbnail=253x0'"
      />
    </div>
    <div class="artistName">
      {{ artistalbum.name }}
      <span v-if="artistalbum.alias[0]">{{ artistalbum.alias[0] }}</span>
    </div>
    <div class="chose">
      <p @click="changeState1" :class="{ white: ishotAlbum }">热门专辑</p>
      <p @click="changeState2" :class="{ white: isHotSongs }">热门单曲</p>
      <p @click="changeState3" :class="{ white: isIntroduce }">艺人介绍</p>
    </div>
    <div class="hotAlbum" v-show="ishotAlbum">
      <BorderTitle>专辑</BorderTitle>
      <ul>
        <li v-for="(hotAlbumItem, i) in hotAlbums" :key="i">
          <router-link :to="`/albums/${hotAlbumItem.id}`">
            <img
              :src="
                hotAlbumItem.picUrl + '?imageView=1&type=webp&thumbnail=253x0'
              "
            />
            <div class="hotAlbumName">{{ hotAlbumItem.name }}</div>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="hotSongs" v-show="isHotSongs">
      <BorderTitle>单曲</BorderTitle>
      <ul>
        <li v-for="(item, i) in hotSongs" :key="i">
          <SongItem :item="item"></SongItem>
        </li>
      </ul>
    </div>
    <div class="briefDesc" v-show="isIntroduce">
      <BorderTitle>简介</BorderTitle>
      <div class="jianjie">{{ artist.briefDesc?artist.briefDesc:"该歌手暂无详细简介噢~" }}</div>
    </div>

    <div class="detail"></div>
  </div>
</template>

<script>
import BorderTitle from "@/components/BorderTitle";
import SongItem from "@/components/SongItem";

export default {
  name: "Artists",
  data() {
    return {
      artist: null,
      artistalbum: null,
      hotAlbums: null,
      hotSongs: null,
      ishotAlbum: true,
      isHotSongs: false,
      isIntroduce: false,
    };
  },
  components: {
    BorderTitle,
    SongItem,
  },
  created() {
    this.artist = this.$route.params.id;
    this.getAlbum();
    this.getArtistDesc();
    this.getAllSong();
  },
  methods: {
    // 歌手描述
    getArtistDesc() {
      this.$http.get("/artist/desc?id=" + this.artist).then((data) => {
        this.artist = data.data;
      });
    },
    // 歌手专辑
    getAlbum() {
      this.$http
        .get("/artist/album?limit=30&id=" + this.artist)
        .then((data) => {
          this.artistalbum = data.data.artist;
          this.hotAlbums = data.data.hotAlbums;
        });
    },

    // 歌手热门单曲
    getAllSong() {
      this.$http
        .get("http://musicapi.leanapp.cn/artists?id=" + this.artist)
        .then((data) => {
          this.hotSongs = data.data.hotSongs;
        });
    },
    // 返回上一页
    backward() {
      this.$router.go(-1);
    },

    changeState1() {
      this.ishotAlbum = true;
      this.isHotSongs = false;
      this.isIntroduce = false;
    },
    changeState2() {
      this.ishotAlbum = false;
      this.isHotSongs = true;
      this.isIntroduce = false;
    },
    changeState3() {
      this.ishotAlbum = false;
      this.isHotSongs = false;
      this.isIntroduce = true;
    },
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.artist {
  .back {
    width: 60px;
    margin: 10px;
  }
  .artistName {
    font-size: 30px;
    margin: 10px;
    span {
      font-size: 16px;
      color: grey;
    }
  }
  .artistImg {
    // width: 100%;
    img {
      width: 100%;
    }
  }
  .chose {
    width: 100%;
    display: flex;
    background-color: #ded2db;
    p {
      flex: 1;
      text-align: center;
      padding: 10px;
    }
    .white {
      background-color: white;
      border-bottom: 2px solid #cc99cc;
    }
  }
  .briefDesc {
    .jianjie {
      width: 90%;
      margin-left: 15px;
      color: grey;
      text-indent: 2em;
      line-height: 36px;
      text-align: justify;
      padding-bottom: 30px;
    }
  }
  .hotAlbum {
    ul {
      margin: 10px;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      
      li {
        width: 31.5%;
        margin-bottom: 20px;
        // margin-right: 10px;
        // align-self: start;
        a {
          text-decoration: none;
          color: black;
          .hotAlbumName {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break:break-all
          }
        }
        img {
          border-radius: 10px;
          width: 100%;
        }
      }
      :last-child{
        // align-self: start;
        
      }
    }
  }
}
</style>